document.addEventListener('DOMContentLoaded', function () {
    const ctx = document.getElementById('weatherChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [
                {
                    label: 'Temperature (°C)',
                    data: [22, 25, 23, 26, 24, 27, 25],
                    borderColor: 'rgba(255, 99, 132, 1)',
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    fill: true,
                    borderWidth: 2
                },
                {
                    label: 'Humidity (%)',
                    data: [60, 65, 63, 68, 62, 70, 66],
                    borderColor: 'rgba(54, 162, 235, 1)',
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    fill: true,
                    borderWidth: 2
                },
                {
                    label: 'Light Lux',
                    data: [100, 120, 110, 130, 115, 140, 125],
                    borderColor: 'rgba(75, 192, 192, 1)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    fill: true,
                    borderWidth: 2
                },
                {
                    label: 'Smoke Concentration',
                    data: [0.1, 0.2, 0.15, 0.3, 0.25, 0.4, 0.35],
                    borderColor: 'rgba(255, 206, 86, 1)',
                    backgroundColor: 'rgba(255, 206, 86, 0.2)',
                    fill: true,
                    borderWidth: 2
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    title: { display: true, text: 'Value' }
                },
                x: {
                    title: { display: true, text: 'Day of the Week' }
                }
            },
            plugins: {
                legend: { position: 'top' }
            }
        }
    });

    // 模拟动态数据更新
    setInterval(function () {
        const newData = {
            temperature: Math.random() * 10 + 20, // 随机生成温度数据
            humidity: Math.random() * 20 + 50,    // 随机生成湿度数据
            lightLux: Math.random() * 50 + 100,   // 随机生成光照强度数据
            smokeConcentration: Math.random() * 0.5 // 随机生成烟雾浓度数据
        };

        myChart.data.datasets[0].data.push(newData.temperature);
        myChart.data.datasets[1].data.push(newData.humidity);
        myChart.data.datasets[2].data.push(newData.lightLux);
        myChart.data.datasets[3].data.push(newData.smokeConcentration);

        // 更新图表
        myChart.update();
    }, 5000); // 每 5 秒更新一次
});